Work with color in mockups 在 Mockup 中使用顏色

學習如何選擇顏色Learn how to choose colors

雖然知道如何在Figma中新增顏色，但“選擇合適顏色”也是一門學問。顏色如何影響使用者感知，屬於“色彩理論”的範疇。以下是一些推薦資源：

Toptal的文章探討顏色在使用者體驗中的作用。

CareerFoundry的《色彩指南》是初學者瞭解色彩理論的入門讀物。

選色工具Coolors：https://coolors.co/ef6f6c-465775-56e39f-59c9a5-5b6c5d

使用填充顏色（Fill）建立並應用顏色Create and apply colors using Fill

1. 開啟Figma檔案。

2. 在工具欄中點選矩形工具（Rectangle Tool），是從左往右數第四個圖示。

3. 在畫板上繪製一個矩形。

4. 選中這個矩形。

5. 在Figma介面右側的設計面板中，找到“Fill（填充）”區域。

6. 點選預設白色（hex碼：#FFFFFF）左側的顏色塊，開啟顏色選擇器。

7. 拖動顏色選擇器左上角是純白，右下角是深黑。

8. 使用吸管工具（Eyedropper）從其他圖形、圖片或文字中提取顏色，應用到當前元素上。

調整顏色屬性Adjust color values

1. 選擇不同型別的填充（Choose a type of paint）

開啟顏色選擇器後，在左上方有四種圖示，分別代表不同的顏色型別：

• Solid（純色）：預設的黑色方塊，表示單一顏色填充。

• Gradient（漸變）：點選後可選擇不同的漸變方式，並可調節方向與顏色。型別包括：
  • Linear（線性）：從一側向另一側顏色逐漸淡出。
  • Radial（放射）：從中心向四周圓形擴散。
  • Angular（角度）：從一點開始順時針擴散。
  • Diamond（菱形）：中心像加號，向四角擴散。

• Image（影象填充）：將影象作為背景填充。

• Video（影片填充）：將影片作為元素的填充。

2. 調整色調（Hue）

在顏色塊下方有一條彩虹色滑塊，可以調整色調。例如：將滑塊移到綠色區域，再在顏色框中調出橄欖綠。

3. 調整透明度（Opacity）

色調滑塊下方是透明度滑塊。透明度表示顏色的“不透明”程度：

• 100%為完全不透明（飽和顏色）。

• 50%為半透明（能看到背景）。

• 0%為完全透明（不可見）。

可以把透明度理解為刷油漆的厚度：多次塗刷等於更高的不透明度。

使用描邊顏色（Stroke）建立並應用顏色Create and apply colors using Stroke

1. 選中你建立的圖形。

2. 在設計面板中，找到“Stroke（描邊）”區域。

3. 點選“Stroke”文字或右側的加號（+）按鈕。

4. 預設描邊顏色為黑色（#000000），寬度為1。描邊寬度可調至1至1000之間。

5. 在“Inside（內部）”的下拉選單中，可切換描邊位置（內部、居中、外部）。

6. 點選右側的三個點，開啟“高階描邊設定”（Advanced Stroke），可調整描邊角度和形狀。

描邊不僅讓顏色更醒目，也可創造動態的圖形效果。推薦閱讀 Design Code 的文章《Figma Handbook: Fill, Stroke, and Advanced Stroke》。

設定並儲存顏色樣式Set and save color styles

找到理想顏色後，可以儲存為樣式方便以後重複使用：

1. 在左側圖層面板中，選中已設好顏色的形狀。

2. 在右側設計面板中，找到“Fill”部分，點選樣式圖示（四個點組成的方塊）。

3. 彈出“Libraries（樣式庫）”選單，點選右上角加號（+）。

4. 輸入樣式名稱，點選“Create Style”完成儲存。

要應用儲存的顏色樣式：

1. 選中需要使用顏色樣式的圖形。

2. 在右側“Fill”部分點選樣式圖示，選擇儲存的樣式即可。

若需更多幫助，可訪問Figma幫助中心，學習關於顏色、文字、效果、佈局網格等樣式的建立方法。